<template>
  <div>
    <div>
      <el-form :inline="true" :model="form" class="form">
        <el-form-item>
          <el-input
            prefix-icon="el-icon-search"
            v-model="form.searchData"
            placeholder="请输入要搜索的词"
            class="input"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="onSearch()">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-carousel
        class="carousel"
        type="card"
        :interval="5000"
        arrow="always"
        height="400px"
        trigger="click"
      >
        <el-carousel-item v-for="item in carousels" :key="item.shoesId">
          <el-image :src="item.shoesImage" fit="fill" class="carouselImage"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="typeshoess">
      <el-tabs v-model="activeName" >
        <el-tab-pane label="全部" name="first">
          <el-row>
            <el-col :span="4" v-for="o in allData" :key="o.shoesId">
              <router-link
                :to="{name: 'ShoesDetail', query: {shoesId: o.shoesId}}"
                style="text-decoration:none;"
              >
                <el-card class="typeCard" shadow="hover">
                  <el-image :src="o.shoesImage" fit="fill" class="typeImage"></el-image>
                  <div class="priceImage">
                    <span>￥{{o.shoesPrice}}</span>
                  </div>
                  <div class="nameImage">
                    <span>{{o.shoesName}}</span>
                  </div>
                  <div class="otherImage">
                    <el-row>
                      <el-col :span="10">
                        <el-row class="monthNumber">
                          <el-col :span="12">月成交</el-col>
                          <el-col :span="12" class="numberImage">{{o.shoesMonthNumber}}笔</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="8">
                        <el-row class="talkNumber">
                          <el-col :span="10">评价</el-col>
                          <el-col :span="14" class="talkImage">{{o.shoesDiscsss}}条</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="4" class="iconImage">
                        <i class="el-icon-star-on" style="color: #E6A23C;font-size:20px;"></i>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </router-link>
            </el-col>
          </el-row>
        </el-tab-pane>
        
        <el-tab-pane label="板鞋" name="second">
          <el-row>
            <el-col :span="4" v-for="o in banxie" :key="o.shoesId">
              <router-link
                :to="{name: 'ShoesDetail', query: {shoesId: o.shoesId}}"
                style="text-decoration:none;"
              >
                <el-card class="typeCard" shadow="hover">
                  <el-image :src="o.shoesImage" fit="fill" class="typeImage"></el-image>
                  <div class="priceImage">
                    <span>￥{{o.shoesPrice}}</span>
                  </div>
                  <div class="nameImage">
                    <span>{{o.shoesName}}</span>
                  </div>
                  <div class="otherImage">
                    <el-row>
                      <el-col :span="10">
                        <el-row class="monthNumber">
                          <el-col :span="12">月成交</el-col>
                          <el-col :span="12" class="numberImage">{{o.shoesMonthNumber}}笔</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="8">
                        <el-row class="talkNumber">
                          <el-col :span="10">评价</el-col>
                          <el-col :span="14" class="talkImage">{{o.shoesDiscsss}}条</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="4" class="iconImage">
                        <i class="el-icon-star-on" style="color: #E6A23C;font-size:20px;"></i>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </router-link>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="跑步鞋" name="third">
          <el-row>
            <el-col :span="4" v-for="o in paobuxie" :key="o.shoesId">
              <router-link
                :to="{name: 'ShoesDetail', query: {shoesId: o.shoesId}}"
                style="text-decoration:none;"
              >
                <el-card class="typeCard" shadow="hover">
                  <el-image :src="o.shoesImage" fit="fill" class="typeImage"></el-image>
                  <div class="priceImage">
                    <span>￥{{o.shoesPrice}}</span>
                  </div>
                  <div class="nameImage">
                    <span>{{o.shoesName}}</span>
                  </div>
                  <div class="otherImage">
                    <el-row>
                      <el-col :span="10">
                        <el-row class="monthNumber">
                          <el-col :span="12">月成交</el-col>
                          <el-col :span="12" class="numberImage">{{o.shoesMonthNumber}}笔</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="8">
                        <el-row class="talkNumber">
                          <el-col :span="10">评价</el-col>
                          <el-col :span="14" class="talkImage">{{o.shoesDiscsss}}条</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="4" class="iconImage">
                        <i class="el-icon-star-on" style="color: #E6A23C;font-size:20px;"></i>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </router-link>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="篮球鞋" name="fourth">
          <el-row>
            <el-col :span="4" v-for="o in lanqiuxie" :key="o.shoesId">
              <router-link
                :to="{name: 'ShoesDetail', query: {shoesId: o.shoesId}}"
                style="text-decoration:none;"
              >
                <el-card class="typeCard" shadow="hover">
                  <el-image :src="o.shoesImage" fit="fill" class="typeImage"></el-image>
                  <div class="priceImage">
                    <span>￥{{o.shoesPrice}}</span>
                  </div>
                  <div class="nameImage">
                    <span>{{o.shoesName}}</span>
                  </div>
                  <div class="otherImage">
                    <el-row>
                      <el-col :span="10">
                        <el-row class="monthNumber">
                          <el-col :span="12">月成交</el-col>
                          <el-col :span="12" class="numberImage">{{o.shoesMonthNumber}}笔</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="8">
                        <el-row class="talkNumber">
                          <el-col :span="10">评价</el-col>
                          <el-col :span="14" class="talkImage">{{o.shoesDiscsss}}条</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="4" class="iconImage">
                        <i class="el-icon-star-on" style="color: #E6A23C;font-size:20px;"></i>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </router-link>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="足球鞋" name="five">
          <el-row>
            <el-col :span="4" v-for="o in zuqiuxie" :key="o.shoesId">
              <router-link
                :to="{name: 'ShoesDetail', query: {shoesId: o.shoesId}}"
                style="text-decoration:none;"
              >
                <el-card class="typeCard" shadow="hover">
                  <el-image :src="o.shoesImage" fit="fill" class="typeImage"></el-image>
                  <div class="priceImage">
                    <span>￥{{o.shoesPrice}}</span>
                  </div>
                  <div class="nameImage">
                    <span>{{o.shoesName}}</span>
                  </div>
                  <div class="otherImage">
                    <el-row>
                      <el-col :span="10">
                        <el-row class="monthNumber">
                          <el-col :span="12">月成交</el-col>
                          <el-col :span="12" class="numberImage">{{o.shoesMonthNumber}}笔</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="8">
                        <el-row class="talkNumber">
                          <el-col :span="10">评价</el-col>
                          <el-col :span="14" class="talkImage">{{o.shoesDiscsss}}条</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="4" class="iconImage">
                        <i class="el-icon-star-on" style="color: #E6A23C;font-size:20px;"></i>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </router-link>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="网球鞋" name="six">
          <el-row>
            <el-col :span="4" v-for="o in wangqiuxie" :key="o.shoesId">
              <router-link
                :to="{name: 'ShoesDetail', query: {shoesId: o.shoesId}}"
                style="text-decoration:none;"
              >
                <el-card class="typeCard" shadow="hover">
                  <el-image :src="o.shoesImage" fit="fill" class="typeImage"></el-image>
                  <div class="priceImage">
                    <span>￥{{o.shoesPrice}}</span>
                  </div>
                  <div class="nameImage">
                    <span>{{o.shoesName}}</span>
                  </div>
                  <div class="otherImage">
                    <el-row>
                      <el-col :span="10">
                        <el-row class="monthNumber">
                          <el-col :span="12">月成交</el-col>
                          <el-col :span="12" class="numberImage">{{o.shoesMonthNumber}}笔</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="8">
                        <el-row class="talkNumber">
                          <el-col :span="10">评价</el-col>
                          <el-col :span="14" class="talkImage">{{o.shoesDiscsss}}条</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="4" class="iconImage">
                        <i class="el-icon-star-on" style="color: #E6A23C;font-size:20px;"></i>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </router-link>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="帆布鞋" name="seven">
          <el-row>
            <el-col :span="4" v-for="o in fanbuxie" :key="o.shoesId">
              <router-link
                :to="{name: 'ShoesDetail', query: {shoesId: o.shoesId}}"
                style="text-decoration:none;"
              >
                <el-card class="typeCard" shadow="hover">
                  <el-image :src="o.shoesImage" fit="fill" class="typeImage"></el-image>
                  <div class="priceImage">
                    <span>￥{{o.shoesPrice}}</span>
                  </div>
                  <div class="nameImage">
                    <span>{{o.shoesName}}</span>
                  </div>
                  <div class="otherImage">
                    <el-row>
                      <el-col :span="10">
                        <el-row class="monthNumber">
                          <el-col :span="12">月成交</el-col>
                          <el-col :span="12" class="numberImage">{{o.shoesMonthNumber}}笔</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="8">
                        <el-row class="talkNumber">
                          <el-col :span="10">评价</el-col>
                          <el-col :span="14" class="talkImage">{{o.shoesDiscsss}}条</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="4" class="iconImage">
                        <i class="el-icon-star-on" style="color: #E6A23C;font-size:20px;"></i>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </router-link>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="拖鞋" name="eight">
          <el-row>
            <el-col :span="4" v-for="o in tuoxie" :key="o.shoesId">
              <router-link
                :to="{name: 'ShoesDetail', query: {shoesId: o.shoesId}}"
                style="text-decoration:none;"
              >
                <el-card class="typeCard" shadow="hover">
                  <el-image :src="o.shoesImage" fit="fill" class="typeImage"></el-image>
                  <div class="priceImage">
                    <span>￥{{o.shoesPrice}}</span>
                  </div>
                  <div class="nameImage">
                    <span>{{o.shoesName}}</span>
                  </div>
                  <div class="otherImage">
                    <el-row>
                      <el-col :span="10">
                        <el-row class="monthNumber">
                          <el-col :span="12">月成交</el-col>
                          <el-col :span="12" class="numberImage">{{o.shoesMonthNumber}}笔</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="8">
                        <el-row class="talkNumber">
                          <el-col :span="10">评价</el-col>
                          <el-col :span="14" class="talkImage">{{o.shoesDiscsss}}条</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="4" class="iconImage">
                        <i class="el-icon-star-on" style="color: #E6A23C;font-size:20px;"></i>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </router-link>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="休闲鞋" name="nine">
          <el-row>
            <el-col :span="4" v-for="o in xiuxianxie" :key="o.shoesId">
              <router-link
                :to="{name: 'ShoesDetail', query: {shoesId: o.shoesId}}"
                style="text-decoration:none;"
              >
                <el-card class="typeCard" shadow="hover">
                  <el-image :src="o.shoesImage" fit="fill" class="typeImage"></el-image>
                  <div class="priceImage">
                    <span>￥{{o.shoesPrice}}</span>
                  </div>
                  <div class="nameImage">
                    <span>{{o.shoesName}}</span>
                  </div>
                  <div class="otherImage">
                    <el-row>
                      <el-col :span="10">
                        <el-row class="monthNumber">
                          <el-col :span="12">月成交</el-col>
                          <el-col :span="12" class="numberImage">{{o.shoesMonthNumber}}笔</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="8">
                        <el-row class="talkNumber">
                          <el-col :span="10">评价</el-col>
                          <el-col :span="14" class="talkImage">{{o.shoesDiscsss}}条</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="4" class="iconImage">
                        <i class="el-icon-star-on" style="color: #E6A23C;font-size:20px;"></i>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </router-link>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      carousels: [
        {
          shoesId: 0,
          shoesImage: require("../images/showShoes/0.jpg")
        },
        {
          shoesId: 1,
          shoesImage: require("../images/showShoes/1.jpg")
        },
        {
          shoesId: 2,
          shoesImage: require("../images/showShoes/2.jpg")
        },
        {
          shoesId: 3,
          shoesImage: require("../images/showShoes/3.jpg")
        },
        {
          shoesId: 4,
          shoesImage: require("../images/showShoes/4.jpg")
        }
      ],
      xiuxianxie: [],
      banxie: [],
      paobuxie: [],
      lanqiuxie: [],
      zuqiuxie: [],
      wangqiuxie: [],
      fanbuxie: [],
      tuoxie: [],
      form:{
      searchData:"",
      },
      allData:[]
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onSearch(){
      let that = this;
      that.getList()
    },
    getList() {
          // es6过滤得到满足搜索条件的展示数据
        this.allData = this.allData.filter((item, index) =>
            item.shoesName.includes(this.form.searchData)
         )
          
            },
    shoesListGet() {
      let that = this;
       that.$axios
        .post("/shoes/queryShoesInfoListAll", {})
        .then(function(response) {
          
          that.allData = response.data.data.rows;
          console.log(that.allData)
          
        })
        .catch(function(error) {
          console.log(error);
        });
      that.$axios
        .post("/shoes/queryShoesInfoListByShoesType?shoesType=xiuxianxie", {})
        .then(function(response) {
          that.xiuxianxie = response.data.data.rows;
        })
        .catch(function(error) {
          console.log(error);
        });
      that.$axios
        .post("/shoes/queryShoesInfoListByShoesType?shoesType=banxie", {})
        .then(function(response) {
          that.banxie = response.data.data.rows;
        })
        .catch(function(error) {
          console.log(error);
        });
      that.$axios
        .post("/shoes/queryShoesInfoListByShoesType?shoesType=lanqiuxie", {})
        .then(function(response) {
          that.lanqiuxie = response.data.data.rows;
        })
        .catch(function(error) {
          console.log(error);
        });
      that.$axios
        .post("/shoes/queryShoesInfoListByShoesType?shoesType=paobuxie", {})
        .then(function(response) {
          that.paobuxie = response.data.data.rows;
        })
        .catch(function(error) {
          console.log(error);
        });
      that.$axios
        .post("/shoes/queryShoesInfoListByShoesType?shoesType=zuqiuxie", {})
        .then(function(response) {
          that.zuqiuxie = response.data.data.rows;
        })
        .catch(function(error) {
          console.log(error);
        });
      that.$axios
        .post("/shoes/queryShoesInfoListByShoesType?shoesType=wangqiuxie", {})
        .then(function(response) {
          that.wangqiuxie = response.data.data.rows;
        })
        .catch(function(error) {
          console.log(error);
        });
      that.$axios
        .post("/shoes/queryShoesInfoListByShoesType?shoesType=fanbuxie", {})
        .then(function(response) {
          that.fanbuxie = response.data.data.rows;
        })
        .catch(function(error) {
          console.log(error);
        });
      that.$axios
        .post("/shoes/queryShoesInfoListByShoesType?shoesType=tuoxie", {})
        .then(function(response) {
          that.tuoxie = response.data.data.rows;
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  created() {
    this.shoesListGet();
  }
};
</script>

<style scoped>
.form {
  text-align: center;
}
.input {
  width: 500px;
}

.commodities img {
  display: block;
  margin: 0 auto;
}
.card {
  text-decoration: none;
}
.newPrice {
  color: #f56c6c;
  font-size: 24px;
}
.oldPrice {
  color: #909399;
  text-decoration: line-through;
}
.commentCount {
  float: right;
  margin-top: 10px;
  color: #909399;
  font-size: 13px;
}
.el-button--text {
  color: black;
}
.carouselImage {
  height: 100%;
  width: 100%;
}
.typeshoess >>> .el-tabs__active-bar {
  background-color: #e6a23c;
}
.typeshoess >>> .el-tabs__item.is-active {
  color: #e6a23c;
}
.typeshoess >>> .el-tabs__item:hover {
  color: #e6a23c;
}
.typeshoess >>> .el-card__body {
  padding: 0px;
}
.typeshoess >>> .el-card.is-hover-shadow:hover {
  border: 1px solid #e6a23c;
}
.typeImage {
  width: 180px;
  height: 180px;
  margin-left: 16px;
}
.typeCard {
  height: 286px;
  margin: 0px 10px 10px 10px;
}

.priceImage {
  color: #ff0036;
  font-family: Arial;
  font-weight: 400;
  font-size: 20px;
  margin-left: 12px;
}
.nameImage {
  font-size: 12px;
  line-height: 14px;
  margin-top: 10px;
  margin-left: 16px;
}
.otherImage {
  margin-top: 10px;
  color: #999;
  font-size: 12px;
  border: 1px solid #eee;
  line-height: 40px;
  height: 40px;
}
.otherImage .monthNumber,
.talkNumber {
  border-right: 1px solid #eee;
}
.iconImage {
  padding: 0px 16px;
}
.monthNumber .numberImage {
  color: #b57c5b;
}
.talkNumber .talkImage {
  color: #38b;
}
</style>